<template>
	<el-header>
		<el-input v-model="search.keyword" placeholder="流水号  / 标题" clearable></el-input>
		<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
	</el-header>
	<el-main class="nopadding infinite-list" v-infinite-scroll="load" style="overflow:auto;height: 100%">
		<el-empty description="暂无记录" :image-size="100" v-if="flowList.length==0"></el-empty>
		<el-card v-for="item in flowList" class="infinite-list-item" :key="item.runId" style="cursor: pointer;position: relative;" @click="doWork(item)">
			<template v-slot:header>
				<div v-if="item.recTime==''||item.recTime==undefined" style="position: absolute;">
					<sc-icon-new/>
				</div>
				<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;" :title="item.flowTitle">
					#{{ item.id }}{{ item.flowTitle }}
				</div>
			</template>
			<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
			<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
				【{{ item.stepName }}】
				<el-tag v-if="testPassTime(item)=='1'" type="success" effect="dark">正常</el-tag>
				<el-tag v-else-if="testPassTime(item)=='0'" type="warning" effect="dark">超时</el-tag>
				<el-tag v-else type="info" effect="dark">未知</el-tag>
			</div>
			<div style="margin-top:10px;display: flex">
				<div style="display: contents;">
					<el-avatar :src="item.avatar" size="small"></el-avatar>
				</div>
				<div style="display: inline-block;padding-top:5px;width: 100%">
					<span style="margin-left: 15px">{{ item.createUser }}</span>
					<span style="float: right;margin-left: 20px">
								<div>
									<el-icon><el-icon-clock/></el-icon>{{ item.createTime }}
								</div>
							</span>
				</div>
			</div>
			</sc-water-mark>
		</el-card>
	</el-main>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			dialog: {},
			flowList: [],
			loadFlag: true,
			loadStatus: true,
			search: {
				model:'1',
				isDoc:'1',
				page: 0,
				keyword: ""
			},
			waterMarkContent:'',
			waterMarkSubtext:'',
			waterMark:'0',
		}
	},
	computed: {},
	mounted() {
		this.waterMark = this.$TOOL.data.get("WATER_MARK");
		this.waterMarkContent = this.$TOOL.data.get("WATER_MARK_CONTENT");
		this.waterMarkSubtext = this.$TOOL.data.get("WATER_MARK_SUBTEXT");
	},
	methods: {
		async upsearch() {
			this.flowList = [];
			this.search.page = 0;
			this.loadFlag = true;
			this.load();
		},
		load() {
			if (this.loadFlag && this.loadStatus) {
				this.loadStatus = false;
				this.getBpmFlowApprovalListForApp();
			}
		},
		async getBpmFlowApprovalListForApp() {
			let res = await this.$API.bpm.bpmStepRun.getBpmFlowApprovalListForApp.get(this.search);
			if (res.code == 200) {
				this.flowList = this.flowList.concat(res.data);
				this.search.page = this.search.page + 10;
				this.loadStatus = true;
				if (res.data.length < 10) {
					this.loadFlag = false
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		doWork(item) {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/doc/handle/dowork',
					query:{
						runId:item.runId,
						stepRunId:item.stepRunId,
						flowId:item.flowId
					}
				})
			})
		},
		testPassTime(item) {
			var createTime = item.createTime;
			var passTime = item.passTime;
			if (passTime != 0) {
				var timestamp1 = Date.parse(new Date(createTime)) + passTime * 60;
				var timestamp = Date.parse(new Date());
				if (timestamp1 > timestamp) {
					return "1"
				} else {
					return "0";
				}
			} else {
				return "1";
			}
		},
	}
}
</script>
